@import '@common/styles/index.scss';

.list {
  padding: rem($padding-4n) 0 rem($padding-6n);
  .item {
    width: 100%;
    margin-bottom: rem($margin-4n);
    height: rem(82);
    border-radius: rem($border-radius-small);
    background-color: $body-bg-color;
    display: flex;
    align-items: center;
    padding: rem($padding-4n) rem($padding-6n);
    box-sizing: border-box;
    cursor: pointer;

    &:last-child {
      margin-bottom: 0;
    }
    .content {
      width: 100%;
      height: 100%;
      padding-left: rem($padding-4n);
    }
    .top {
      margin-bottom: rem($margin-2n);
      max-width: rem(480);
      @include lamp-clamp(1);
      .name {
        font-weight: 700;
        font-size: rem($font-size-middle);
        line-height: rem(18);
        color: var(--color-text-primary);
        margin-right: rem($margin-2n);
      }
      .group {
        font-size: rem($font-size-primary);
        line-height: rem($font-line-height-small);
        color: var(--color-text-secondary);
      }
    }
    .num {
      display: flex;
      align-items: center;
      color: var(--color-text-regular);
      .numItem {
        font-size: rem($font-size-primary);
        line-height: rem($font-line-height-small);
        color: var(--color-primary);
        padding: 0 rem($padding-2n);
        margin-right: rem(1);
        position: relative;
        &:after {
          position: absolute;
          right: -1px;
          top: -1px;
          content: '|';
          font-size: rem(12);
          line-height: rem($font-line-height-small);
          color: var(--border-line-color);
        }
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          border-right: none;
          &:after {
            content: '';
          }
        }
      }
      .numTitle {
        color: var(--color-text-regular);
        margin-right: rem($margin-5);
      }
    }
    .button {
      width: rem(113);
      height: rem(36);
      font-size: rem($font-size-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      .addIcon {
        margin-right: rem($margin-5);
      }
      .addText {
        margin-right: rem(4);
      }
    }

    .follow {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      &:hover {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
      }
    }
    .isFollow {
      background-color: var(--color-primary5);
      border-color: var(--color-primary5);
      &:hover {
        background-color: var(--color-primary5);
        border-color: var(--color-primary5);
      }
    }
    .withdraw {
      background-color: var(--color-warn);
      border-color: var(--color-warn);
      &:hover {
        background-color: var(--color-warn);
        border-color: var(--color-warn);
      }
    }
  }
}
